<script setup>
  import { computed } from 'vue'
  import { ref } from 'vue'
  import { logisticsApi } from '@/services/medicine'
  // 胶囊距离顶部的距离
  let top = 0
  // 当前位置
  const logisticsInfo = ref({})
  // 地图路线
  const polyline = ref([])
  // 起点终点标记
  const markers = ref([])
  // 地图中心点
  const center = ref({})
  // 获取地址参数
  const props = defineProps({
    id: String
  })

  // #ifdef MP-WEIXIN
  const menuButton = uni.getMenuButtonBoundingClientRect()
  top = menuButton.top - (50 - menuButton.height) / 2 + 'px'
  // #endif

  function onBackClick() {
    uni.navigateBack({ delta: 1 })
  }
  // 查看物流信息
  async function getLogistics() {
    // 调用接口
    const res = await logisticsApi(props.id)
    // 渲染数据
    logisticsInfo.value = res.data.data
    // 起始点坐标
    const from = logisticsInfo.value.logisticsInfo[0]
    // 终止点坐标
    const to =
      logisticsInfo.value.logisticsInfo[
        logisticsInfo.value.logisticsInfo.length - 1
      ]
    // 线路标记点，起点、终点
    markers.value = [
      {
        id: 1,
        latitude: from.latitude,
        longitude: from.longitude,
        iconPath: '/static/images/start.png',
        width: 25,
        height: 30
      },
      {
        id: 2,
        latitude: to.latitude,
        longitude: to.longitude,
        iconPath: '/static/images/end.png',
        width: 25,
        height: 30
      }
    ]
    // 调用云函数获取路线坐标点
    uniCloud.callFunction({
      name: 'qq-map',
      data: {
        from: Object.values(from).join(','),
        to: Object.values(to).join(',')
      },
      success({ result }) {
        // 腾讯地图返回的数据
        const coords = result.result.routes[0].polyline
        const points = []

        //坐标解压（返回的点串坐标，通过前向差分进行压缩）
        for (let i = 2; i < coords.length; i++) {
          coords[i] = Number(coords[i - 2]) + Number(coords[i]) / 1000000
        }

        //将解压后的坐标放入点串数组points中
        for (let i = 0; i < coords.length; i += 2) {
          points.push({ latitude: coords[i], longitude: coords[i + 1] })
        }
        // 假设位置
        const current = points[100]
        // 地图中心点为运输车辆所在位置
        center.value = current
        // 标记运输车辆的位置
        markers.value.push({
          id: 3,
          latitude: current.latitude,
          longitude: current.longitude,
          iconPath: '/static/images/car.png',
          width: 50,
          height: 30
        })
        // 运输路线轨迹
        polyline.value.push({
          points,
          color: '#16c2a3',
          width: 5
        })
      },
      fail(error) {
        console.log(error)
      }
    })
  }

  // 省略前面小节的代码...

  // 获取物流信息
  getLogistics()
</script>

<template>
  <view class="timeline-page">
    <map
      :polyline="polyline"
      :markers="markers"
      :latitude="center.latitude"
      :longitude="center.longitude"
      scale="1"
      class="uni-map"
    />
    <cover-view :style="{ paddingTop: top }" class="navigator-bar">
      <cover-view @click="onBackClick" class="icon-back">
        <cover-image src="/static/images/icon-back.png" />
      </cover-view>

      <cover-view class="title">{{ logisticsInfo.statusValue }}</cover-view>
    </cover-view>
    <cover-view class="timeline-meta">
      <cover-view class="status">{{ logisticsInfo.statusValue }}</cover-view>
      <cover-view class="extra">
        预计 {{ logisticsInfo.estimatedTime }} 送达
        {{ logisticsInfo.name }}
        {{ logisticsInfo.awbNo }}
      </cover-view>
    </cover-view>
    <view class="timeline-detail">
      <view class="title">物流详情</view>
      <view class="timeline">
        <view class="line">
          <view class="badge text">收</view>
          <view class="content">
            收货地址：广东省广州市大华区明离路科技园880号
          </view>
        </view>
        <view v-for="item in logisticsInfo.list" :key="item.id" class="line">
          <view class="badge dot" v-if="item.status <= 3"></view>
          <view class="badge icon" v-if="item.status === 4">
            <uni-icons
              color="#2cb5a5"
              custom-prefix="iconfont"
              type="icon-truck"
            />
          </view>
          <view class="badge icon" v-if="item.status === 5">
            <uni-icons
              color="#2cb5a5"
              custom-prefix="iconfont"
              type="icon-checked"
            />
          </view>
          <view class="label">{{ item.statusValue }}</view>
          <view class="content">{{ item.content }}</view>
          <view class="time">{{ item.createTime }}</view>
        </view>
      </view>
    </view>
  </view>
</template>

<style lang="scss">
  .timeline-page {
    padding-bottom: calc(env(safe-area-inset-bottom) + 60rpx);
  }

  .uni-map {
    width: 100%;
    height: 470px;
  }

  .navigator-bar {
    position: fixed;
    top: 10px;
    left: 10px;
    right: 10px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    border-radius: 4px;
    background-color: #fff;

    /* #ifdef APP */
    top: 25px;
    /* #endif */

    /* #ifdef MP-WEIXIN */
    height: 50px;
    top: 0;
    left: 0px;
    right: 0px;
    border-radius: 0;
    /* #endif */

    .icon-back {
      width: 16px;
      height: 16px;
      position: absolute;
      left: 0;
      padding: 14px;
    }
  }

  .timeline-meta {
    position: absolute;
    top: 380px;
    left: 10px;
    right: 10px;

    line-height: 1;
    padding: 15px 20px;
    border-radius: 4px;
    background-color: #fff;

    .status {
      font-size: 15px;
      color: #121826;
      font-weight: 500;
    }

    .extra {
      font-size: 14px;
      color: #6f6f6f;
      margin-top: 10px;

      // white-space: wrap;
    }
  }

  .timeline-detail {
    padding: 0 30rpx;

    .title {
      line-height: 1;
      padding: 40rpx 0;
      font-size: 30rpx;
      color: #121826;
      font-weight: 500;
    }

    .timeline {
      min-height: 300rpx;
      margin-left: 30rpx;
      margin-top: 20rpx;

      padding: 10rpx 60rpx 1rpx;
      border-left: 4rpx solid #16c2a3;
    }

    .line {
      margin-bottom: 30rpx;
      position: relative;
    }

    .badge {
      position: absolute;
      left: -92rpx;
      top: -10rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 60rpx;
      height: 60rpx;
      border-radius: 50%;

      &.text {
        color: #2cb5a5;
        font-size: 24rpx;
        background-color: #eaf8f6;
      }

      &.icon {
        background-color: #f6f7f9;
      }

      &.dot::before {
        content: '';
        display: block;
        width: 24rpx;
        height: 24rpx;
        background-color: #16c2a3;
        border-radius: 50%;
      }
    }

    .label {
      font-size: 32rpx;
      font-weight: 500;
      color: #6f6f6f;
      margin-bottom: 10rpx;
    }

    .content {
      color: #848484;
      font-size: 28rpx;
      margin-bottom: 10rpx;
    }

    .time {
      font-size: 28rpx;
      font-weight: 500;
      color: #6f6f6f;
    }
  }
</style>
